<template>
	<div>
		<template v-if="item">
			<!-- 轮播 -->
			<van-swipe class="my-swipe" :autoplay="3000">
				<van-swipe-item v-for="(v, i) in item.banner" :key="i" @click="openMask">
					<van-image :src="v" width="100vw" height="200px"></van-image>
				</van-swipe-item>
			</van-swipe>
			<!-- 价格列表 -->
			<div>
				<van-card v-for="v in item.subList" :key="v.id" :price="v.price.toFixed(2)" :desc="v.desc" :title="v.title" />
			</div>
			<!-- 图片描述 -->
			<van-overlay :show="show">
				<vat-button @click="clonseMask">关闭</vat-button>
				<div v-for="(value, key, i) in item.descImg" :key="i">
					<van-divider>{{ key }}</van-divider>
					<template v-for="(v, i) in 6" :key="v">
						<van-image v-if="i !== 0" :src="value[i]" width="33vw" height="60px" />

						<div v-else style="display: inline-block;position: relative;">
							<van-image :src="value[i]" width="33vw" height="60px" />

							<b class="b" @click="open(key)">{{ key }}-{{ value.length }}张图片...</b>
						</div>
					</template>

				</div>
			</van-overlay>

			<!-- 批量展示 -->
			<van-overlay :show="show1">
				<van-divider>{{ key }}</van-divider>
				<van-image v-for="(v, i) in item.descImg[key]" :key="i" width="33vw" height="120px" :src="v"
					@click="openPreview((item as ListItemState).descImg[key], i)"></van-image>
			</van-overlay>
		</template>
	</div>
</template>


<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router'
// import axios from 'axios'
import request from '@/utils/request'
import { onMounted, ref } from 'vue';
import { Notify } from 'vant'
import { ListItemState } from '@/store'
import { ImagePreview } from 'vant';
// 获取路由
const route = useRoute()
const router = useRouter()
// 获取动态路由
const id = route.params.id as string
// 详情数据
const item = ref<ListItemState>()
// 第一个遮罩层
const show = ref(false)
// 第二个遮罩层
const show1 = ref(false)
// 类型
type keyType = 'face' | 'trim' | 'space'
// 当前访问的描述图片的哪一种
// 外观 | 内置 | 空间
// 'face' | 'trim' | 'space'
const key = ref<keyType>('face')

// 遮罩层操作
const openMask = () => {
	show.value = true
}
const clonseMask = () => {
	show.value = false
}
// 遮罩层1操作
const openMask1 = () => {
	show1.value = true
}
const clonseMask1 = () => {
	show1.value = false
}
// 点击6张展示图的第一张图片
const open = (keyItem: keyType) => {
	// 保存key
	key.value = keyItem

	clonseMask()
	openMask1()
}
// 预览图片
// 点击小图
const openPreview = (arr: string[], i: number) => {
	clonseMask1()
	ImagePreview({
		startPosition: i,
		images: arr
	})
}
//请求详情数据
const getchPostData = (id: string) => {
	request.get(`/api/select/car/${id}`).then((resp) => {
		const { code, message, data } = resp.data;
		console.log(data);
		if (code === 200) {
			item.value = data
		} else {
			Notify({
				type: 'danger', message, onClose() {
					router.push('/home')
				}
			})
		}
	})
}


onMounted(() => {
	getchPostData(id)
})
</script>


<style>
.b {
	width: 33vw;
	height: 60px;
	position: absolute;
	left: 0;
	top: 0;
	background-color: rgba(0, 0, 0, .6);
	color: white;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
</style>